<template>
  <Top-Page class="live-room">
    <NavBar title="直播" left-arrow @click-left="navBack()" />
    <view class="live-fill-view">
      <view class="field-box field-border">
        <view class="field-label">
          <view class="field-label__text">房间号</view>
          <!-- <view>：</view> -->
        </view>
        <input
          disabled
          class="field-value"
          :value="channelId"
          @input="
            (event) => {
              channelId = event.detail.value;
            }
          "
          placeholder="请输入频道ID"
        />
      </view>
      <view class="field-box field-border">
        <view class="field-label">
          <view class="field-label__text">昵称</view>
          <!-- <view>：</view> -->
        </view>
        <input
          class="field-value"
          :value="nickname"
          @input="
            (event) => {
              nickname = event.detail.value;
            }
          "
          placeholder="请输入昵称"
        />
      </view>
    </view>

    <!-- <input
        class="field-value"
        :value="password"
        @input="
          (event) => {
            password = event.detail.value;
          }
        "
        placeholder="请输入登录密码"
      /> -->

    <button type="primary" class="primary" @click="loginLiveroom">登录</button>
  </Top-Page>
</template>

<script>
// #ifdef APP
var liveModule = uni.requireNativePlugin('PLV-LiveUniPlugin-StreamerLiveModule');
var configModule = uni.requireNativePlugin('PLV-LiveUniPlugin-StreamerConfigModule');
// #endif
import NavBar from '@/components/NavBar/NavBar.vue';
import { navBack } from '@/utils/utils.js';

export default {
  data() {
    return {
      navBack: navBack,
      channelId: '',
      password: '',
      nickname: ''
    };
  },
  components: { NavBar },
  onLoad(options) {
    this.channelId = decodeURIComponent(options.channel_id) ?? '';
    this.password = decodeURIComponent(options.channel_passwd) ?? '';
    this.nickname = options.realname ?? '';
  },
  methods: {
    loginLiveroom() {
      uni.showToast({
        title: '登陆中...',
        icon: 'loading',
        mask: true,
        duration: 999999
      });

      if (!this.channelId || !this.password) {
        uni.hideToast();

        uni.showToast({
          title: '信息异常，请退出后重新登录尝试',
          duration: 5000,
          icon: 'none'
        });
      }

      liveModule.loginStreamer(
        {
          channelId: this.channelId,
          password: this.password,
          nickname: this.nickname
        },
        (result) => {
          uni.hideToast();

          //title: result.isSuccess ? 'login succeed' : result.errMsg,
          !result.isSuccess &&
            uni.showToast({
              title: result.errMsg,
              icon: 'none'
            });
        }
      );
    }
  }
};
</script>

<style lang="scss">
.live-room {
  padding-top: 100rpx;

  .live-fill-view {
    padding: 10rpx 0;
    width: 80%;
    margin-left: 10%;
    margin-top: 60rpx;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 2rpx 2rpx 16rpx #ddd;
  }

  .field-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 30rpx 10rpx;

    .field-label {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      .field-label__text {
        width: 120rpx;
      }
    }

    .field-value {
      width: 100%;
      font-size: 14px;
      display: flex;
      align-items: center;
    }
  }

  .field-border {
    border-bottom: 1rpx solid #f4f4f4;
  }

  .primary {
    margin-top: 100rpx;
    line-height: 2.4;
    width: 80%;
  }
}
</style>
